<script setup lang="ts">
import PreviewImage from '@/components/preview-image/preview-image.vue'
import { REGEX_HTTP_URL } from '@/libs/validate'
import { computed } from 'vue'

const props = withDefaults(
    defineProps<{
        tips: string
        showOneOnly?: boolean
    }>(),
    {
        showOneOnly: false,
    },
)
const handleTips = computed<Obj>(() => {
    if (!props.tips) return {}
    try {
        const remarkObj = JSON.parse(props.tips)
        delete remarkObj.newOrderNotify
        delete remarkObj.remark
        if (props.showOneOnly) {
            // 只返回第一项
            if (Object.keys(remarkObj)[0]) {
                return { [Object.keys(remarkObj)[0]]: Object.values(remarkObj)[0] }
            } else {
                return {}
            }
        }
        return remarkObj
    } catch (error) {
        return { 备注: props.tips }
    }
})
</script>

<template>
    <view v-for="(content, title) in handleTips" :key="title" class="tips_container">
        <view class="title">{{ title }}</view>
        <view v-if="REGEX_HTTP_URL(content)" class="content">
            <PreviewImage :images="[content]" height="80" width="100" />
        </view>
        <view v-else class="content">{{ content }}</view>
    </view>
</template>

<style lang="scss" scoped>
.tips_container {
    display: flex;
    flex-wrap: nowrap;
    .title {
        // width: 140rpx;
        position: relative;
        flex-shrink: 0;
        // 文字两侧分布
        // text-align: justify;
        // text-align-last: justify;
        margin-right: 14rpx;
        margin-bottom: 10rpx;
        &::after {
            position: absolute;
            content: '：';
            top: 0;
            right: -25rpx;
        }
    }
}
</style>
